<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: HaoDong
 * @LastEditTime: 2022-01-06 11:54:02
-->
<template>
  <div id="bottom4" style="height: 95%"></div>
</template>
<script>
import { get } from "@/utils/request.js";
import moment from "moment";
import { Area } from "@antv/g2plot";
export default {
  data() {
    return {
      resData: [],
      params: {
        page: 1,
        pageSize: 50,
      },
      area: null,
    };
  },
  computed: {
    chartData() {
      return this.resData.map((item) => {
        return {
          time: moment(item.insert_time).format("hh:mm"),
          humidity: parseFloat(item.humidity),
        };
      });
    },
  },
  methods: {
    chongzai() {
      this.loatData();
      setInterval(() => {
        this.loatData();
      }, 5000);
    },
    initChart() {
      if (this.area) {
        this.area.destroy();
      }
      this.area = new Area("bottom4", {
        data: this.chartData,
        xField: "time",
        yField: "humidity",
        annotations: [
          {
            type: "text",
            position: ["min", "median"],
            content: "中位数",
            offsetY: -4,
            style: {
              textBaseline: "bottom",
            },
          },
          {
            type: "line",
            start: ["min", "median"],
            end: ["max", "median"],
            style: {
              stroke: "#409f86",
              lineDash: [2, 2],
              strokeOpacity: 0.8,
            },
          },
        ],
      });
      this.area.render();
      // this.area = true;
    },
    loatData() {
      get("/dashboard/pageQueryData", {
        ...this.params,
        device_id: 34,
      }).then((res) => {
        this.resData = res.data.list;
        this.initChart();
      });
    },
  },
  created() {
    this.chongzai();
  },
};
</script>



